<template>
  <div id="loginBg">
    <div class="inputborder">
      <input type="text" placeholder="请输入身份证号" v-model="idCard">
    </div>
    <div class="loginbtn" @click="login"></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        idCard: process.env == 'development' ? '320281199606286774' : ''
      };
    },
    methods: {
      login: function () {
        var vm = this;
        vm.idCard = vm.idCard.trim().toUpperCase();
        var error = vm.$util.idCardValidator(vm.idCard);
        if (error) {
          vm.$notify(error);
          return;
        } else {
          vm.$toast.loading({
            message: '',
            forbidClick: true
          });
          vm.$fly('登录', 'api/checkLogin.jsp', {idCard: vm.idCard}, function (data) {
            vm.$toast.clear();
            if (data.success) {
              var userInfo = {
                idCard: vm.idCard,
                attestationId: data.data.attestationId || '',
                attestationId2: data.data.attestationId2 || '',
                type: data.data.type || '',
                type2: data.data.type2 || '',
                tip: data.data.msg,
                getCard: data.data.getCard,
                jqrz: data.data.jqrz
              };
              vm.$store.commit("userInfo", userInfo);
              vm.$db.set("userInfo", userInfo);
              vm.$router.replace({path: '/nav'});
            } else {
              vm.$notify(data.msg);
            }
          }, function () {
            vm.$notify('服务器异常，请重试');
            vm.$toast.clear();
          });
        }
        return;
      }
    },
    mounted: function () {
      var hrt = document.documentElement.clientHeight;
      document.getElementById('loginBg').style.height = hrt + 'px' ;
      var userInfo = this.$db.getObject('userInfo');
      if (userInfo) {
        this.$store.commit("userInfo", userInfo);
        this.$router.replace({path: '/' + (this.$route.query.from || 'nav')});
      }
    }
  };
</script>

<style lang="less" scoped>
#loginBg {
  background: url(~static/images/m/mb2436.png);
  height: 100vh;
  background-size: 100% 100%;
  position: fixed;
  width: 100vw;
  .inputborder {
    background: url(~static/images/m/mb19.png);
    background-size: 100% 100%;
    position: relative;
    width: 240px;
    margin: 0 auto;
    height: 40px;
    margin-top: 270px;
    border-radius: 20px;
    &::before {
      content: "";
      background: url(~static/images/m/mb18.png);
      background-size: 100% 100%;
      position: absolute;
      width: 20px;
      height: 20px;
      top: 10px;
      left: 10px;
    }
    input  {
      background: none;
      border: none;
      width: calc(100% - 40px);
      height: 40px;
      float: right;
      color: yellow;
      font-size: 16px;
      &::placeholder {
        color: #fff;
      }
    }
  }
  .loginbtn {
    background: url(~static/images/m/mb20.png);
    background-size: 100% 100%;
    width: 200px;
    height: 40px;
    margin: 30px auto;
  }
}
</style>